<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/vue.js"></script>
    <link rel="stylesheet" href="/index.css">
    <script src="/index.js"></script>
    <title>包子的图床</title>
    <link rel="shortcut icon" href="tu.ico" />
</head>

<body>
    <div id="app">
        <div class="upload">
            <el-upload class="upload-demo" drag action= "/api/up" accept="image/*" :on-success="handleAvatarSuccess">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传图片文件</div>
            </el-upload>
{{--            <br/>--}}
{{--            <div class="el-upload__tip" slot="tip">--}}
{{--                登录后可以保存历史记录，点此<a href="#">登录</a>--}}
{{--                还没有账号？点此<a href="#">注册</a>--}}
{{--            </div>--}}
        </div>
        <div class="input">
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="URL" name="first"><el-input v-model="back_url"  @click.native="$event.target.select()"></el-input></el-tab-pane>
                  <el-tab-pane label="HTML" name="second"><el-input v-model="html_url"  @click.native="$event.target.select()"></el-input></el-tab-pane>
                  <el-tab-pane label="Markdown" name="third"><el-input v-model="Markdown_url"  @click.native="$event.target.select()"></el-input></el-tab-pane>
                  <el-tab-pane label="Markdown with link" name="fourth"><el-input v-model="Markdown_link_url"  @click.native="$event.target.select()"></el-input></el-tab-pane>
                </el-tabs>
              </template>
        </div>
{{--        <b style="color:red;">本图床已开启自动鉴黄，请谨慎上传图片</b>--}}
    </div>
    @if(env('ICP_NO'))
    <div style="width:300px;margin:0 auto; padding:20px 0; ">         <a target="_blank" href="#" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">{{env('ICP_NO')?env('ICP_NO'):''}}</p></a>         <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37070502000312" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="/beian.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">{{env('GONGAN_NO')?env('GONGAN_NO'):''}}</p></a>     </div>
    @endif
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            back_url: '',
            file: '',
            activeName: 'first',
            html_url:'',
            Markdown_url:'',
            Markdown_link_url:'',
        },

        methods: {
            handleAvatarSuccess(response, file, fileList) {
                const item = this;
                //console.log(response+file+fileList);
                if(response == 'shield'){
                    this.open2();
                    return false;
                }
                // console.log(response);
                this.open1();
                this.back_url = response;
                this.html_url = "<img src=\""+response+"\" alt=\"请输入信息\" />";
                this.Markdown_url = "![请输入信息]("+response+")"
                this.Markdown_link_url = "[![请输入信息]("+response+")"
            },
            handleClick(tab, event) {
            //console.log(tab, event);
            },
            open1() {
		        this.$notify({
		          title: '成功',
		          message: '图片上传成功，请在下面输入框复制地址！',
		          type: 'success'
		       });
            },
            open2() {
                this.$notify({
                    title: '失败',
                    message: '您上传的图片涉嫌违规，已经被屏蔽！',
                    type: 'error'
                });
            },
        },
    })
</script>
<style>

    .upload {
        width: 400px;
        margin: 80px auto;
    }

    .upload-demo {
        padding: auto 10px;
    }

    .input {
        width: 400px;
        height: 100px;
        margin: auto auto;
        padding-right: 10px;
    }

    div {
        text-align: center;
    }
</style>

</html>
